<!--
*  2021-03-15
*  子任务数据
-->
<template>
  <div id="app" class="historical-task">
    <!-- 头部导航 -->
    <van-nav-bar
      left-arrow
      :title="title"
      left-text="返回"
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <!-- 确认信息 -->
    <better-scroll
      class="public-scroll"
      :data="tableData"
      :totalPage="totalPage"
    >
      <van-cell-group>
        <van-cell
          v-for="(data, index) in tableData"
          :key="index"
          :title="data.title"
        >
          <template slot="default">
            <span>{{ getStatusVal(data.status) }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </better-scroll>
  </div>
</template>

<script>
import { openWin } from "@/utils/index";
import { getTaskDone } from "@/api/warping";
export default {
  name: "historical-task",
  data() {
    return {
      tableData: [],
      totalPage: 1,
      title: "",
      id: "",
      stepName: "",
      taskId: "",
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        this.taskId = window.api.pageParam.taskId;
        this.stepName = window.api.pageParam.stepName;
        this.title = window.api.pageParam.stepName;
        that.onGetTableData();
        // 监听页面消失的时候，关掉页面就可以了
        window.api.addEventListener(
          {
            name: "viewdisappear",
          },
          function () {
            window.api.closeWin();
          }
        );
      });
    } else {
      window.apiready = () => {
        this.taskId = window.api.pageParam.taskId;
        this.stepName = window.api.pageParam.stepName;
        this.title = window.api.pageParam.stepName;
        that.onGetTableData();
        // 监听页面消失的时候，关掉页面就可以了
        window.api.addEventListener(
          {
            name: "viewdisappear",
          },
          function () {
            window.api.closeWin();
          }
        );
      };
    }
  },
  methods: {
    // 重新扫码
    onClickLeft() {
      openWin("historical", {
        tableData: window.api.pageParam.tableData,
        title: window.api.pageParam.title,
        resId: window.api.pageParam.resId,
        loomNo: window.api.pageParam.loomNo,
      });
    },
    // 获取数据
    onGetTableData() {
      getTaskDone(
        {
          upTaskId: this.taskId,
          pageSize: 100,
          pageNum: 1,
        },
        (res) => {
          console.log(res, "res");
          this.tableData = res.list;
        }
      );
    },
    getStatusVal(status) {
      let val = "";
      switch (status) {
        case 0:
          val = "待落布";
          break;
        case 1:
          val = "待接单";
          break;
        case 2:
          val = "已落布";
          break;
        case 3:
          val = "已完成";
          break;
        case 4:
          val = "驳回";
          break;
        case 5:
          val = "异常完成";
          break;
      }
      return val;
    },
  },
};
</script>

<style lang="scss">
.historical-task {
  display: flex;
  flex-direction: column;
  .public-scroll {
    height: calc(100vh - 108px);
    .van-cell__title {
      flex: 0 0 80%;
      .historical-task-cell {
        display: flex;
        justify-content: space-between;
        span {
          flex: 1;
          font-size: 20px;
          text-align: center;
        }
      }
    }
  }
  .van-icon-success::before {
    position: relative;
    top: 15px;
    font-size: 36px;
  }

  .van-dialog {
    width: 560px;
    height: 417px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .van-dialog__header {
      font-size: 36px;
      color: #333333;
      margin-top: 20px;
    }
    .van-dialog__content {
      font-size: 30px;
      color: #333333;
      text-align: center;
    }
    .van-dialog__footer {
      height: 80px;
      .van-button {
        height: 100%;
        font-size: 36px;
        color: #1677ff;
      }
    }
    .van-cell__title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .van-cell__title,
    .van-cell__value {
      span {
        font-size: 26px;
      }
    }
    .van-cell-group {
      .van-cell {
        margin: 15px 0;
      }
    }
  }
  .historical-task-btn {
    width: 700px;
    height: 100px;
    background: #1677ff;
    border-radius: 2px;
    font-size: 32px;
    color: #ffffff;
    margin: 0 auto;
  }
}
</style>
